:global {
  #root {
    background-color: #FFFFFF !important;
    width: 100%;
    height: 100%;
  }
}

.split1 {
  display: flex;
  flex-direction: column;

  :global {
    .gutter {
      z-index: 999;
      background-color: #eee;
      background-repeat: no-repeat;
      background-position: 50%;
    }

    .gutter.gutter-vertical {
      background-image: url('');
      cursor: row-resize;
    }
  }
}

.split2 {
  display: flex;
  flex-direction: row;

  :global {
    .gutter {
      z-index: 999;
      background-color: #eee;
      background-repeat: no-repeat;
      background-position: 50%;
    }

    .gutter.gutter-horizontal {
      background-image: url('');
      cursor: col-resize;
    }
  }
}

@height: 24px;
@width: 48px;

.hide {
  display: none !important;
}

.hideGutter {
  :global {
    .test {
      display: none;
    }
  }
}

.top1 {
  position: absolute;
  height: @height;
  width: 100%;
  top: 0;
  left: 0;
}

.top2 {
  position: absolute;
  height: @height;
  width: 100%;
  top: @height;
  left: 0;
}

.bottom1 {
  position: absolute;
  height: @height;
  width: 100%;
  bottom: 0;
  left: 0;
}

.bottom2 {
  position: absolute;
  height: @height;
  width: 100%;
  bottom: @height;
  left: 0;
}

.left {
  position: absolute;
  width: @width;
  top: @height *2;
  bottom: @height * 2;
  left: 0;
}

.right {
  position: absolute;
  width: @width;
  top: @height *2;
  bottom: @height * 2;
  right: 0;
}

.center {
  position: absolute;
  top: @height *2;
  bottom: @height * 2;
  left: @width;
  right: @width;
}
